<template>
  <section class="class-item" :style="{ 'background-image': `url(/static/images/clz${props.itemIndex}.png)` }">
  	<n-tag :type="activeType[props.entry.active]">{{activeDict[props.entry.active]}}</n-tag>
		<n-space vertical :size="30">
			<h3>{{props.entry.name}}</h3>
			<div class="item-footer">
				<p>学生数量:<span class="count">{{props.entry.studentCount}}</span></p>
				<n-button v-if="props.entry.active === 0" size="small" type="info" @click="startClass(props.entry.id)">开课</n-button>
				<n-button v-if="props.entry.active === 1" size="small" type="warning" @click="endClass(props.entry.id)">结课</n-button>
			</div>
		</n-space>
  </section>
</template>

<script setup>
import { activeDict, start, end } from '../data'
import { useDialog } from 'naive-ui'
const dialog = useDialog()
const props = defineProps(['entry', 'itemIndex', 'getTable'])
const activeType = ['primary', 'success', 'error']
function startClass(id) {
	dialog.warning({
		title: '提示',
		content: '开班后可以对班级进行授课等操作，确定开班吗？',
		positiveText: '确定',
		negativeText: '取消',
		onPositiveClick: () => {
			start(id, content => {
				props.getTable() 
			})
		}
	})
}
function endClass(id) {
	dialog.warning({
		title: '提示',
		content: '结课后无法再对班级做任何操作，确定结课吗？',
		positiveText: '确定',
		negativeText: '取消',
		onPositiveClick: () => {
			end(id, content => {
				props.getTable() 
			})
		}
	})
}
function showdetail () {

}
</script>

<style scoped lang="scss">
.class-item {
	height: 130px;
	background-repeat: no-repeat;
	background-size: 100% 130px;
	padding: 30px 10px 0;
	border-radius: 5px;
	background-color: #ffffff;
	position: relative;
	color: #fff;
	.count {
		margin-left: 10px;
		font-size: 1.2rem;
		font-weight: 700;
	}
	.n-tag {
		border-radius: 5px;
		position: absolute;
		top: 0;
		right: 0;
	}
	.item-footer {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
}
</style>